<template>
  <el-menu :collapse="headerStores.isopenMenu" :default-active="router.currentRoute.value.fullPath" class="el-menu-vertical-demo" router text-color="black" :unique-opened="true">
    <el-menu-item index="#/" class="titles">
      <el-icon><img class="titleImg" src="@/assets/static/logo.png" /></el-icon>
      <template #title>配件管理后台</template>
    </el-menu-item>
    <el-menu-item index="/system/frist/frist">
      <el-icon>
        <HomeFilled />
      </el-icon>
      <template #title>首页</template>
    </el-menu-item>
    <el-menu-item-group v-for="item in routers" :key="item.name" :index="item.path">
      <el-sub-menu v-if="item.meta.type.name === 'M'" :index="item.path">
        <template #title>
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item v-for="item2 in item.children" :key="item2.name" :index="item2.path">
          <template #title>
            <el-icon>
              <component :is="item2.meta.icon"></component>
            </el-icon>
            <span>{{ item2.name }}</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item v-if="item.meta.type.name === 'W'" :index="item.path">
        <el-icon>
          <component :is="item.meta.icon" v-if="item.meta.icon"></component>
        </el-icon>
        <template #title>{{ item2.name }}</template>
      </el-menu-item>
    </el-menu-item-group>
  </el-menu>
</template>
<script lang="ts" setup>
import router from '@/router/router'
import { headerStore } from '@/store/header'
const headerStores = headerStore()
const routers = router.getRoutes().filter(st => st.meta && st.meta.type && (st.meta.type.name === 'M' || st.meta.type.name === 'W'))
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo img {
  width: 40px;
  height: 30px;
  margin-right: 10px;
  text-align: center;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
  min-height: 400px;
  active-text-color: #ffd04b;
  background-color: #f4f4f4;
  height: calc(100vh);
  .titles {
    color: black;
    font-size: large;
    margin-bottom: 20px;
    margin-top: 10px;
  }
}

.el-menu {
  background-color: #f4f4f4;
}
.el-select {
  width: 200px;
}
</style>
